<template>
  <ul class="tw-w-230 tw-h-330 bg-color-white tw-p-20 tw-rounded-md">
    <li
        v-for="(item, index) in LearnNavigateArr"
        :key="index"
        :class="
            modelValue == index
              ? 'tw-bg-[#e8f7fb] tw-text-[#04ADDB]'
              : ' tw-text-[#222]'
          "
        class="tw-h-50  flex-middle tw-px-20 border-box click tw-rounded-md tw-mb-10"
        @click="changeLearn(index)"
    >
      <img
          :src="modelValue == index ? item.imageActive : item.image"
          alt=""
          :class="index>0?'tw-w-24 tw-h-24 tw-mr-10 -tw-ml-2':'tw-w-20 tw-h-20 tw-mr-10'"
      />
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import {defineModel} from "vue";

defineProps({
  LearnNavigateArr: {
    type: Array,
    default: []
  }
})
const modelValue = defineModel();
let emit = defineEmits(['changeLearn'])
const changeLearn = (index) => {
  emit('changeLearn', index)
}
</script>

<style lang='scss' scoped>

</style>

